<template>
  <div class="clockAmaz">
    <div class="container">
      <div class="clock">
        <div class="hr" :style="hhRotate"></div>
        <div class="min" :style="mmRotate"></div>
        <div class="sc" :style="ssRotate"></div>
      </div>
    </div>
    <div class="shadwo"></div>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  watch,
  toRefs,
} from "vue";
export default defineComponent({
  setup() {
    //一个小格6度
    const deg = 6;
    const time: any = reactive({
      hh: 0,
      mm: 0,
      ss: 0,
      hhRotate: computed(() => {
        return {
          transform: `rotateZ(${time.hh * deg * 5}deg)`,
        };
      }),
      mmRotate: computed(() => {
        return {
          transform: `rotateZ(${time.mm * deg}deg)`,
        };
      }),
      ssRotate: computed(() => {
        return {
          transform: `rotateZ(${time.ss * deg}deg)`,
        };
      }),
    });

    function update() {
      const day = new Date();
      time.hh = day.getHours() % 12;
      time.mm = day.getMinutes();
      time.ss = day.getSeconds();
      setInterval(() => {
        time.ss += 1;
      }, 1000);
    }

    watch(
      () => time.ss,
      (ss) => {
        if (ss % 60 == 0) time.mm += 1;
      }
    );
    watch(
      () => time.mm,
      (mm) => {
        if (mm % 60 == 0) time.hh += 1;
      }
    );

    onMounted(() => {
      update();
    });

    return { ...toRefs(time) };
  },
});
</script>

<style lang="scss" scoped>
.clockAmaz {
  * {
    transition: 0.25s;
  }
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  //背景
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #fd79a8 50%, #81ecec 50%);
  }
  &::after {
    position: absolute;
    top: -1rem;
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(160deg, #a29bfe 50%, transparent 50%);
    animation: shake 5s ease-in-out infinite;
  }
  //晃动的动画
  @keyframes shake {
    0%,
    100% {
      transform: translateY(0.5rem);
    }
    50% {
      transform: translateY((-0.5rem));
    }
  }
  .container {
    z-index: 1;
    width: 20rem;
    height: 20rem;
    backdrop-filter: blur(1.25rem);
    border-radius: 50%;
    border: 1px solid rgba($color: #fff, $alpha: 0.5);
    animation: shake 5s ease-in-out infinite;
    animation-delay: -2.5s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    //钟的下方阴影
    &::before {
      content: "";
      position: absolute;
      bottom: -3.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 3rem;
      border-radius: 50%;
      background-image: radial-gradient(
        rgba(0, 0, 0, 0.5),
        transparent,
        transparent
      );
    }
    .clock {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(100% - 1rem);
      height: calc(100% - 1rem);
      background: radial-gradient(transparent, rgba(255, 255, 255, 0.2)),
        url("./clock.png");
      // background: url("./clock.png");
      background-size: cover;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-right: none;
      border-bottom: none;
      box-shadow: -0.5rem -0.5rem -0.5rem rgba($color: #000, $alpha: 0.1),
        0.5rem 0.5rem 1rem rgba($color: #000, $alpha: 0.1),
        0px 2rem 2.5rem rgba($color: #000, $alpha: 0.2);
      //钟的中心圆点
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background: #fff;
        z-index: 444;
      }
    }
    @mixin pos($top) {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, $top);
      border-radius: 0.3rem;
    }
    .hr {
      &::before {
        width: 0.4rem;
        height: 4rem;
        background-color: #e84393;
        @include pos(-3.75rem);
        z-index: 1;
      }
    }
    .min {
      &::before {
        width: 0.2rem;
        height: 4.5rem;
        background-color: #fff;
        z-index: 2;
        @include pos(-4.65rem);
      }
    }
    .sc {
      &::before {
        width: 0.1rem;
        height: 7rem;
        background-color: #fff;
        z-index: 3;
        @include pos(-6rem);
      }
    }
  }
}
</style>
